<template>
  <div>
    <a-list
      itemLayout="horizontal"
      :dataSource="data"
    >
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
            <span v-if="item.value"> : </span>
            <span class="security-list-value">{{ item.value }}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>
      </a-list-item>
    </a-list>
    <edit-password ref="password"/>
    <edit-telephone ref="telephone"/>
    <edit-email ref="email"/>
    <edit-username ref="username"/>
  </div>
</template>

<script>
import EditPassword from '../modal/EditPassword'
import EditTelephone from '../modal/EditTelephone'
import EditEmail from '../modal/EditEmail'
import EditUsername from '../modal/EditUsername'

export default {
  components: {
    EditUsername,
    EditPassword,
    EditTelephone,
    EditEmail
  },
  data () {
    return {
      user: null,
      data: [
        { title: '用户名设置', description: '已设置用户名', value: this.username(), actions: { title: '修改', callback: this.editUsername } },
        { title: '账户密码', description: '当前密码', value: this.password(), actions: { title: '修改', callback: this.editPassword } },
        { title: '密保手机', description: '已绑定手机', value: this.telephone(), actions: { title: '修改', callback: this.editTelephone } },
        { title: '备用邮箱', description: '已绑定邮箱', value: this.email(), actions: { title: '修改', callback: this.editEmail } }
      ]
    }
  },
  methods: {
    editPassword () {
      this.$refs.password.show() // $refs 是一个对象，持有已注册过 ref 的所有的子组件。
    },
    editTelephone () {
      this.$refs.telephone.show()
    },
    editEmail () {
      this.$refs.email.show()
    },
    editUsername () {
      this.$refs.username.show()
    },
    username () {
      const username = this.$store.getters.userInfo.username
      if (username === '' || username === null) {
        return '未设置'
      } else {
        return username
      }
    },
    password () {
      const password = this.$store.getters.userInfo.password
      if (password === '' || password === null) {
        return '未设置'
      } else {
        return '已设置'
      }
    },
    telephone () {
      const telephone = this.$store.getters.userInfo.telephone
      if (telephone === '' || telephone === null) {
        return '未设置'
      } else {
        return telephone.substring(0, 3) + '****' + telephone.substring(7)
      }
    },
    email () {
      const email = this.$store.getters.userInfo.email
      if (email === '' || email === null) {
        return '未设置'
      } else {
        return email.substring(0, 3) + '****' + email.substring(7)
      }
    }
  }
}
</script>
